<template>
  <el-form-item :label="label" :label-width="labelWidth">
    <div :style="style">
      <div :style="{ width: `${props.data.compWidth || 100}%` }">
        <div v-for="(t, i) in textArray" :key="i" class="__link">
          <el-link type="primary" :href="linkArray[i]" target="_blank">
            {{ t }}
          </el-link>
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElFormItem } from 'element-plus'
import { useProps } from '../../common-props/hooks'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const { label, labelWidth } = useProps(props)
const textArray = computed(() => {
  const t = props.data.text
  if (t) {
    return t.split('\n')
  } else {
    return []
  }
})
const linkArray = computed(() => {
  const l = props.data.link
  if (l) {
    const hrefArray = l.split('\n')
    return hrefArray.map((h: string) => (!/^(?:http(s)?:\/\/)/.test(h) ? `http://${h}` : h))
  } else {
    return []
  }
})
const style = computed(() => {
  if (textArray.value.length > 1) {
    return { marginTop: '4px' }
  } else {
    return { marginTop: '-2px' }
  }
})
// const style = computed(() => {
//   const css: any = { fontSize: `${props.data.fontSize}px`, textAlign: props.data.align }
//   if (props.data.marginTop) {
//     css.marginTop = `${props.data.marginTop}px`
//   }
//   if (props.data.marginRight) {
//     css.marginRight = `${props.data.marginRight}px`
//   }
//   if (props.data.marginBottom) {
//     css.marginBottom = `${props.data.marginBottom}px`
//   }
//   if (props.data.marginLeft) {
//     css.marginLeft = `${props.data.marginLeft}px`
//   }
//   if (props.data.bold) {
//     css.fontWeight = 'bold'
//   }
//   if (props.data.italic) {
//     css.fontStyle = 'italic'
//   }
//   return css
// })
</script>

<style lang="scss" scoped>
:deep(.__link) {
  line-height: 20px;
  .el-link {
    line-height: 20px;
    .el-link__inner {
      line-height: 20px;
    }
  }
}
</style>
